<template>
  <a-sub-menu :key="group[getProp().key]">
    <template #title>
      <span
        ><icon-font
          :icon="group[getProp().icon]"
          v-if="group[getProp().icon]"
        ></icon-font>
        <DesktopOutlined v-else />
        <span>{{ group[getProp().name] }}</span></span
      >
    </template>
    <template v-for="item in group[getProp().children]">
      <menu-item
        :group="item"
        :dataProps="dataProps"
        v-if="handleOnReceiveField(item, MenuType.MENU)"
        :key="item[getProp().url]"
      ></menu-item>
      <sub-menu
        :group="item"
        :dataProps="dataProps"
        v-else-if="group[getProp().children] && handleOnReceiveField(item, MenuType.DIR)"
        :key="item[getProp().url]"
      ></sub-menu>
    </template>
  </a-sub-menu>
</template>

<script>
import MenuItem from "./MenuItem";
import IconFont from "components/icon/IconFont";

import { Menu } from "ant-design-vue";
import { DesktopOutlined } from "@ant-design/icons-vue";

import { MenuType } from "assets/js/Constant";
import { getProps } from "assets/js/Basic";

export default {
  name: "SubMenu",
  props: {
    group: {
      type: Object,
      default: () => {},
    },
    dataProps: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    AMenuItem: Menu.Item,
    ASubMenu: Menu.SubMenu,
    IconFont,
    MenuItem,
    DesktopOutlined,
  },
  data() {
    return {
      MenuType,
    };
  },
  methods: {
    getProp() {
      return getProps(this.dataProps);
    },
    handleOnReceiveField(group, menuType) {
      const props = this.getProp();
      return group[props.type] == menuType;
    },
  },
};
</script>

<style lang="less" scoped>
</style>